<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>配件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header {
            width: 1250px;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header .h-container {
            height: 100%;
            width: 323px;
            background-color: #ffc42a;
            transform: skewX(-20deg);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .h-container .hc-c {
            display: flex;
            transform: skewX(20deg);
            font-size: 12px;
        }

        .h-container .hc-c p {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        .hc-c .h-c-img {
            width: 15px;
        }

        .header-nav {
            width: 1250px;
            font: 14px;
            color: #fff;
            background-size: 2px 100%;
            background-color: #2e2e2e;
            display: flex;
            position: relative;
        }

        .header-nav p {
            height: 66px;
            padding-left: 20px;
            padding-right: 20px;
            text-align: center;
            line-height: 66px;
        }

        .header-nav p:first-child {
            padding-left: 0px;
        }

        .header-nav p:hover {
            color: #ffc42a;
        }

        .header-tabs {
            height: 60px;
            width: 1250px;
            line-height: 60px;
            font-size: 12px;
        }

        .cc-left {
            width: 1250px;
            height: 1300px;
            display: flex;
            flex-wrap: wrap;
        }

        .cc-right {
            padding-top: 110px;
        }

        .cc-right img {
            width: 520px;
            transform: translateX(-60px);
        }

        .zhuangtailan {
            margin: auto;
            padding: 0;
        }

        .footer {
            width: 1250px;
            display: flex;
            justify-content: space-between;
            padding-top: 60px;
            box-sizing: border-box;
        }

        .f-top {
            margin-bottom: 20px;
        }

        .footer-1 .f-title {
            font-size: 24px;
            font-weight: 500;
            color: #000;
        }

        .footer-1 .f-content {
            font-size: 15px;
            color: #555555;
            margin-top: 20px;
        }

        .f-content p {
            margin-bottom: 10px;
        }

        .f-content2 {
            height: 90px;
            display: flex;
            align-items: center;
        }

        .f-content2 textarea {
            height: 100%;
        }

        .f-content2 button {
            height: 100%;
            background-color: #ffc42a;
            margin-left: 20px;
            padding-left: 10px;
            padding-right: 10px;
            border: none;
        }

        .color-1 {
            background-color: #f7f7f7;
        }

        .color-2 {
            background-color: #2e2e2e;
        }

        .color-3 {
            background-image: linear-gradient(to right, #fff, #f4f8fb);
        }

        li {
            list-style: none;
        }

        li:hover img {
            transform: scale(1.08);
            transition: all 0.8s;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="header">
            <a href="../pages/Neast163.html">
                <img src="../images/logo.png" alt="" class="logo"></a>
            <div class="h-container">
                <div class="hc-c">
                    <a href="" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img01.svg" alt=""> 个人中心
                    </a>
                    <a href="../pages/Neaste163.html" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img02.svg" alt=""> 退出登录
                    </a>
                    <a href="../pages/shopcart.html">
                        <img class="h-c-img" src="../images/img03.svg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>


    <div class="box color-2">
        <div class="header-nav">
            <p><a href="../pages/Neast163.html" style="color: #fff;text-decoration:none;">首页</a></p>
            <p><a href="../pages/inde.html" style="color: #fff;text-decoration:none;">关于</a></p>
            <p><a href="../pages/faqa.html" style="color: #fff;text-decoration:none;">FAQ</a></p>
            <p><a href="../pages/NeasteAftershop.html" style="color: #fff;text-decoration:none;">售后</a></p>
            <p><a href="../pages/sugges.html" style="color: #fff;text-decoration:none;">联系</a></p>
        </div>
    </div>

    <div class="box color-3">
        <div class="container">
            <div class="cc-left">
                <div class="header-tabs">
                    首页 / 配件
                </div>
                <div style="width: 360px;height:1200px;">
                    <div style="width: 360px;height:370px;">
                        <ul style="width: 350px;height:360px">
                            <li
                                style="background-color: rgba(107, 107, 192, 0.174);width: 350px;font-size: 25px;line-height: 80px;">
                                分类</li>
                            <li style="width: 350px;font-size: 25px;line-height:55px;"><a href="">充电</a></li>
                            <li style="width: 350px;font-size: 25px;line-height:55px;"><a href="">手机</a></li>
                            <li style="width: 350px;font-size: 25px;line-height:55px;"><a href="">生活</a></li>
                            <li style="width: 350px;font-size: 25px;line-height:55px;"><a href="">配件</a></li>
                            <li style="width: 350px;font-size: 25px;line-height:55px;"><a href="">音乐</a></li>
                        </ul>
                    </div>
                    <div style="width: 360px;height:370px;">
                        <ul style="width: 350px;height:360px">
                            <li
                                style="background-color: rgba(107, 107, 192, 0.174);width: 350px;font-size: 25px;line-height: 80px;">
                                品牌</li>
                            <li style="width: 350px;font-size: 25px;line-height:55px;"><a href="">apple</a></li>
                            <li style="width: 350px;font-size: 25px;line-height:55px;"><a href="">oppo</a></li>
                            <li style="width: 350px;font-size: 25px;line-height:55px;"><a href="">vivo</a></li>
                            <li style="width: 350px;font-size: 25px;line-height:55px;"><a href="">华为</a></li>
                            <li style="width: 350px;font-size: 25px;line-height:55px;"><a href="">小米</a></li>
                        </ul>
                    </div>
                    <div style="width: 350px;height:400px;">
                        <div
                            style="background-color: rgba(107, 107, 192, 0.174);width: 350px;font-size: 25px;line-height: 80px;height:90px">
                            最新</div>
                        <ul style="width: 350px;height:400px">
                            <li>
                                <div style="width:350px;height: 95px;display: flex;flex-wrap: wrap;">
                                    <div style="width:90px ;height:90px;">
                                        <img src="../images/1.jpg" style="border:1px solid grey " height="78px"
                                            width="78px">
                                    </div>
                                    <div style="width:150px;height:80px;">
                                        <a href="">
                                            <div> 迷你蓝牙耳机</div>
                                        </a>
                                        <div>分类:apple音乐</div>
                                        <div>￥89.00</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div style="width:350px;height: 95px;display: flex;flex-wrap: wrap;">
                                    <div style="width:90px ;height:90px;">
                                        <img src="../images/2.jpg " style="border:1px solid grey " height="80px "
                                            width="80px ">
                                    </div>
                                    <div style="width:150px;height:80px;">
                                        <a href=" ">
                                            <div>击音蓝牙接收器</div>
                                        </a>
                                        <div>分类:apple音乐</div>
                                        <div>￥99.00</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div style="width:350px;height: 95px;display: flex;flex-wrap: wrap;">
                                    <div style="width:90px ;height:90px;">
                                        <img src="../images/3.jpg " style="border:1px solid grey " height="80px "
                                            width="80px ">
                                    </div>
                                    <div style="width:150px;height:80px;">
                                        <a href="">
                                            <p>无线蓝牙耳机</p>
                                        </a>
                                        <div>分类:oppo生活音乐</div>
                                        <div>￥899.00</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div style="width:350px;height: 90px;display: flex;flex-wrap: wrap;">
                                    <div style="width:90px ;height:90px;">
                                        <img src="../images/4.jpg " style="border:1px solid grey " height="80px "
                                            width="80px ">
                                    </div>
                                    <div style="width:150px;height:80px;">
                                        <a href="">
                                            <p>合金车载充电器</p>
                                        </a>
                                        <div>分类:oppo充电生活</div>
                                        <div>￥188.00</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="width:850px;height:1100px ">
                    <ul style="width:850px;height:870px;padding: 25px; display: flex;flex-wrap: wrap; ">
                        <li style="width:255px;height: 360px;margin:10px 30px 25px 0;border:1px #2e2e2e solid;">
                            <div style="width:240px;height:340px;margin:10px 5px 0 5px ">
                                <div style="width:230px;height:230px;margin:10px 0px 0 10px;">
                                    <img src="../images/5.jpg " height="230px" width=" 225px">
                                </div>
                                <a href=" ">
                                    <div style="font-size:18px;text-align: center;line-height: 40px;">原装高清保护膜</div>
                                </a>
                                <div style="text-align:center;line-height:40px;font-size:25px">￥29.00</div>
                            </div>
                        </li>
                        <li style="width:255px;height: 360px;margin:10px 30px 25px 0;border:1px #2e2e2e solid;">
                            <div style="width:240px;height:320px;margin:5px 5px 0 5px ">
                                <div style="width:230px;height:230px;margin:10px 0px 0 10px;">
                                    <img src="../images/6.jpg " height="230px" width=" 225px">
                                </div>
                                <a href=" ">
                                    <div style="font-size:18px;text-align: center;line-height: 40px;">曲面高透保护膜</div>
                                </a>
                                <div style="text-align:center;line-height:40px;font-size:25px">￥49.00</div>
                            </div>
                        </li>
                        <li style="width:255px;height: 360px;margin:10px 0 25px 0;border:1px #2e2e2e solid;">
                            <div style="width:240px;height:320px;margin:5px 5px 0 5px ">
                                <div style="width:230px;height:230px;margin:10px 0px 0 10px;">
                                    <img src="../images/7.jpg " height="230px" width=" 225px">
                                </div>
                                <a href=" ">
                                    <div style="font-size:18px;text-align: center;line-height: 40px;">原装防窥钢化膜</div>
                                </a>
                                <div style="text-align:center;line-height:40px;font-size:25px">￥29.00</div>
                            </div>
                        </li>
                        <li style="width:255px;height: 360px;margin:10px 30px 25px 0;border:1px #2e2e2e solid;">
                            <div style="width:240px;height:340px;margin:10px 5px 0 5px ">
                                <div style="width:230px;height:230px;margin:10px 0px 0 10px;">
                                    <img src="../images/5.jpg " height="230px" width=" 225px">
                                </div>
                                <a href=" ">
                                    <div style="font-size:18px;text-align: center;line-height: 40px;">原装高清保护膜</div>
                                </a>
                                <div style="text-align:center;line-height:40px;font-size:25px">￥29.00</div>
                            </div>
                        </li>
                        <li style="width:255px;height: 360px;margin:10px 30px 25px 0;border:1px #2e2e2e solid;">
                            <div style="width:240px;height:320px;margin:5px 5px 0 5px ">
                                <div style="width:230px;height:230px;margin:10px 0px 0 10px;">
                                    <img src="../images/6.jpg " height="230px" width=" 225px">
                                </div>
                                <a href=" ">
                                    <div style="font-size:18px;text-align: center;line-height: 40px;">曲面高透保护膜</div>
                                </a>
                                <div style="text-align:center;line-height:40px;font-size:25px">￥49.00</div>
                            </div>
                        </li>
                        <li style="width:255px;height: 360px;margin:10px 0 25px 0;border:1px #2e2e2e solid;">
                            <div style="width:240px;height:320px;margin:5px 5px 0 5px ">
                                <div style="width:230px;height:230px;margin:10px 0px 0 10px;">
                                    <img src="../images/7.jpg " height="230px" width=" 225px">
                                </div>
                                <a href=" ">
                                    <div style="font-size:18px;text-align: center;line-height: 40px;">原装防窥钢化膜</div>
                                </a>
                                <div style="text-align:center;line-height:40px;font-size:25px">￥29.00</div>
                            </div>
                        </li>

                        <li style="width:255px;height: 360px;margin:10px 30px 25px 0;border:1px #2e2e2e solid;">
                            <div style="width:240px;height:340px;margin:10px 5px 0 5px ">
                                <div style="width:230px;height:230px;margin:10px 0px 0 10px;">
                                    <img src="../images/5.jpg " height="230px" width=" 225px">
                                </div>
                                <a href=" ">
                                    <div style="font-size:18px;text-align: center;line-height: 40px;">原装高清保护膜</div>
                                </a>
                                <div style="text-align:center;line-height:40px;font-size:25px">￥29.00</div>
                            </div>
                        </li>
                        <li style="width:255px;height: 360px;margin:10px 30px 25px 0;border:1px #2e2e2e solid;">
                            <div style="width:240px;height:320px;margin:5px 5px 0 5px ">
                                <div style="width:230px;height:230px;margin:10px 0px 0 10px;">
                                    <img src="../images/6.jpg " height="230px" width=" 225px">
                                </div>
                                <a href=" ">
                                    <div style="font-size:18px;text-align: center;line-height: 40px;">曲面高透保护膜</div>
                                </a>
                                <div style="text-align:center;line-height:40px;font-size:25px">￥49.00</div>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="box color-1 ">
        <div class="footer ">
            <div class="footer-1 ">
                <div class="f-top ">
                    <p class="f-title ">
                        Contact
                    </p>
                    <p class="f-content ">
                        地址：江苏省苏州市工业园区中新大道西加成大厦
                    </p>
                </div>
                <div class="f-bottom ">
                    <p class="f-title ">
                        +86 123 1234 1234
                    </p>
                    <p class="f-content ">
                        邮箱:qifeiye@admin.com
                    </p>
                </div>
            </div>
            <div class="footer-1 ">
                <p class="f-title ">
                    Quick Links
                </p>
                <div class="f-content ">
                    <p>常见问题</p>
                    <p>测评中心</p>
                    <p>保修政策</p>
                    <p>售后服务</p>
                    <p>售后服务</p>
                </div>
            </div>
            <div class="footer-1 ">
                <p class="f-title ">
                    Products
                </p>
                <div class="f-content ">
                    <p>充电</p>
                    <p>手机</p>
                    <p>生活</p>
                    <p>配件</p>
                    <p>音乐</p>
                </div>
            </div>
            <div class="footer-1 ">
                <p class="f-title ">
                    Feedback
                </p>
                <div class="f-content f-content2 ">
                    <textarea placeholder="内容 " name=" " id="idea" cols="50 " rows="5 "></textarea>
                    <button onclick="submit()">提交</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        function submit() {
            var idea = document.getElementById('idea').value.trim()
            console.log(idea);
            if (!idea) {
                alert('请输入内容在提交');
            } else {
                alert('感谢您的意见!');
            }
        }
    </script>
</body>

</html>